<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入文件 -->
    <script src="../libs/jquery-1.12.4.js"></script>
    <script src="../libs/echarts.js"></script>
    <style>
        #box {
            width: 600px;
            height: 420px;
            padding: 10px 8px 0;
        }
    </style>
</head>

<body>
    <!-- 2. 准备具有宽高属性的容器 -->
    <div id="box"></div>
    <script>
        $(function () {
            // 3. 将容器实例化为 echarts 对象
            let myChart = echarts.init($('#box')[0])
            // 4. 准备图表配置项数据
            let option = {
                // title 图表标题,包含主标题和副标题
                title: {
                    text: 'Stacked Line'
                },
                tooltip: { // 鼠标移入时的提示框
                    trigger: 'axis'
                },
                // legend  图例组件 展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct']
                },
                // grid  直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                // xAxis 控制x轴的相关属性
                xAxis: {
                    type: 'category',
                    // data 类目数据,在类目轴中配置 type: 'category' 才会生效
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                // yAxis 控制y轴的相关属性
                yAxis: {
                    type: 'value'
                },
                // series 系列列表。每个系列通过 type 决定自己的图表类型
                series: [{
                        name: 'Email',
                        type: 'line', // type 控制图表类型 line折线图 bar柱状图
                        smooth: true, // 控制是否平滑曲线，默认是false 
                        data: [120, 132, 161, 134, 182, 230, 270]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        smooth: true, // 控制是否平滑曲线，默认是false
                        data: [220, 260, 200, 234, 290, 395, 360]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        smooth: true, // 控制是否平滑曲线，默认是false
                        data: [150, 232, 180, 260, 215, 370, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        smooth: false, // 控制是否平滑曲线，默认是false
                        data: [320, 332, 301, 334, 390, 330, 320]
                    }
                ]
            };
            // 5. 将图表的配置项数据指定给图表容器
            myChart.setOption(option)
        })
    </script>
</body>

</html>